<template>
  <div>
    <pre>
      前端分页案例：
      （使用方式基本和原生 el-table 一样）
      1、开启分页功能，设置paging属性为true
      2、设置表格数据，data属性
      3、支持分页参数的设置
    </pre>

    <PageTable
      :data="tableData"
      :currentPage="2"
      :pageSizes="[3,5,10]"
      :pageSize="5"
      :paging="true"
      ref="dataTable"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="账号" prop="name"></el-table-column>
      <el-table-column label="名称" prop="nickname"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">{{ scope.row.state%2===0?'正常':'锁定' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click.stop="clickFunc(scope.row)">操作按钮</el-button>
        </template>
      </el-table-column>
    </PageTable>
  </div>
</template>

<script>
// 引入表格组件
import PageTable from "./PageTable.vue";

export default {
  components: {
    PageTable // 引用表格组件
  },
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    queryData() {
      // 模拟后台数据
      let data = [];
      for (var i = 1; i <= 23; i++) {
        data.push({ name: i, nickname: i, email: i, state: i });
      }

      this.tableData = data;
    },
    clickFunc(row) {
      // console.log(row);
      alert(JSON.stringify(row));
    }
  },
  mounted() {
    // 发起查询请求
    this.queryData();
  }
};
</script>

<style lang="scss" scoped>
</style>
